<template>
  <div>
    <n-grid x-gap="12" :cols="2">
      <n-gi>
        <n-card title="字典类型">
          <div class="p-d-h">
            <n-button type="primary" dashed size="small" @click="openDialog(1)">
              <template #icon>
                <n-icon>
                  <AddCircleOutline />
                </n-icon>
              </template>
              新增
            </n-button>
          </div>
          <div>
            <n-spin :show="loading">
              <n-data-table
                :columns="dicColumns"
                :data="dicData"
                :row-key="rowKey"
                default-expand-all
                style="margin-bottom: 10px; width: 100%"
                :max-height="tableHeight"
                :scroll-x="600"
                :row-props="goDetail"
              />

              <div style="display: flex; justify-content: flex-end">
                <n-pagination
                  v-model:page="page"
                  v-model:page-size="pageSize"
                  :page-count="total"
                  :on-update:page="updatePage"
                  :on-update:page-size="updatePageSize"
                  show-size-picker
                  :page-sizes="[10, 20, 30, 40]"
                />
              </div>
            </n-spin>
          </div>
        </n-card>
      </n-gi>
      <n-gi>
        <n-card :title="'字典项（' + itemTitle + '）'">
          <div class="p-d-h">
            <n-button
              type="primary"
              dashed
              size="small"
              @click="openDicItemDialog(1)"
            >
              <template #icon>
                <n-icon>
                  <AddCircleOutline />
                </n-icon>
              </template>
              新增
            </n-button>
          </div>

          <div>
            <n-spin :show="loading2">
              <n-data-table
                :columns="dicItemColumns"
                :data="dicItemData"
                :row-key="rowKey"
                default-expand-all
                style="margin-bottom: 10px; width: 100%"
                :max-height="tableHeight"
                :scroll-x="800"
              />

              <div style="display: flex; justify-content: flex-end">
                <n-pagination
                  v-model:page="page"
                  v-model:page-size="pageSize"
                  :page-count="total"
                  :on-update:page="updatePage"
                  :on-update:page-size="updatePageSize"
                  show-size-picker
                  :page-sizes="[10, 20, 30, 40]"
                />
              </div>
            </n-spin>
          </div>
        </n-card>
      </n-gi>
    </n-grid>

    <myDialogType
      ref="myDialogRef"
      :showModal="showModal"
      :dialogType="dialogType"
      :dialogTitle="dialogTitle"
      :dicType="dicType"
      @closeModal="closeModal"
      @getDicList="getDicList"
    ></myDialogType>

    <myDialogItem
      ref="myDialogDicItemRef"
      :showModal="showModalDicItem"
      :dialogType="dialogType"
      :dialogTitle="dialogTitle"
      :dictionaryId="searchDicItem.dictionaryId"
      @closeModal="closeModal"
      @getDicList="getDicItemList"
    >
    </myDialogItem>
  </div>
</template>

<script setup lang="ts">
import { AddCircleOutline } from "@vicons/ionicons5";
import { h, inject, onMounted, ref } from "vue";
import myDialogItem from "./dicDialogItem.vue";
import myDialogType from "./dicDialogType.vue";
import { NButton, NIcon, NImage, NPopconfirm, NPopover, NTag } from "naive-ui";
import {
  getDictionaryList,
  delDictionary,
  getDictionaryItemListByDid,
  deleteDictionaryItem,
} from "@/api/dictionary";
import { searchDictionaryItemRequest } from "@/model/dictionaryModel";

const tableHeight = ref(inject("tableHeight"));
const showModal = ref(false);
const showModalDicItem = ref(false);
const myDialogRef = ref<any>(null);
const myDialogDicItemRef = ref<any>(null);
const dialogTitle = ref("新增字典类型");
const dialogType = ref(1);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loading = ref(false);
const loading2 = ref(false);
const dicData = ref([]);
const dicType = ref(null);
const dicItemData = ref([]);
const dicColumns = ref([
  {
    title: "字典名称",
    key: "name",
  },
  {
    title: "字典编码",
    key: "code",
  },
  {
    title: "排序",
    key: "sort",
  },
  {
    title: "状态",
    key: "enable",
    render(row) {
      return h(
        NTag,
        {
          style: {
            marginRight: "6px",
          },
          type: row.enable ? "success" : "error",
          bordered: false,
        },
        {
          default: () => (row.enable ? "启用" : "禁用"),
        }
      );
    },
  },
  {
    title: "操作",
    key: "actions",
    fixed: "right",
    render(row) {
      return [
        h(
          NPopconfirm,
          {
            positiveButtonProps: {
              size: "tiny",
            },
            negativeButtonProps: {
              size: "tiny",
            },
            onPositiveClick: (e) => {
              delDictionary({ id: row.id }).then((res) => {
                if (res.code == 200) {
                  window.$message.success(res.message);

                  getDicList();
                } else {
                  window.$message.error(res.message);
                }
              });
            },
          },
          {
            trigger: () => {
              return h(
                NButton,
                {
                  style: { marginRight: "10px" },
                  strong: true,
                  secondary: true,
                  type: "error",
                  size: "small",
                },
                { default: () => "删除" }
              );
            },
            default: () => {
              return "确定要删除？";
            },
          }
        ),
        h(
          NButton,
          {
            strong: true,
            secondary: true,
            type: "warning",
            size: "small",
            onClick: () => openDialog(2, row.id),
          },
          { default: () => "编辑" }
        ),
      ];
    },
    width: 150,
  },
]);
const dicItemColumns = ref([
  {
    title: "字典项名称",
    key: "name",
  },
  {
    title: "字典项值",
    key: "value",
  },
  {
    title: "描述",
    key: "description",
  },
  {
    title: "排序",
    key: "sort",
  },
  {
    title: "状态",
    key: "enable",
    render(row) {
      return h(
        NTag,
        {
          style: {
            marginRight: "6px",
          },
          type: row.enable ? "success" : "error",
          bordered: false,
        },
        {
          default: () => (row.enable ? "启用" : "禁用"),
        }
      );
    },
  },
  {
    title: "操作",
    key: "actions",
    fixed: "right",
    render(row) {
      return [
        h(
          NPopconfirm,
          {
            positiveButtonProps: {
              size: "tiny",
            },
            negativeButtonProps: {
              size: "tiny",
            },
            onPositiveClick: (e) => {
              deleteDictionaryItem({ id: row.id }).then((res) => {
                if (res.code == 200) {
                  window.$message.success(res.message);

                  getDicItemList();
                } else {
                  window.$message.error(res.message);
                }
              });
            },
          },
          {
            trigger: () => {
              return h(
                NButton,
                {
                  style: { marginRight: "10px" },
                  strong: true,
                  secondary: true,
                  type: "error",
                  size: "small",
                },
                { default: () => "删除" }
              );
            },
            default: () => {
              return "确定要删除？";
            },
          }
        ),
        h(
          NButton,
          {
            strong: true,
            secondary: true,
            type: "warning",
            size: "small",
            onClick: () => openDicItemDialog(2, row.id),
          },
          { default: () => "编辑" }
        ),
      ];
    },
    width: 150,
  },
]);
const searchDicItem = ref<searchDictionaryItemRequest>({
  dictionaryId: "",
  name: null,
  value: null,
});
const itemTitle = ref("");

onMounted(() => {
  getDicList();
});

const getDicList = () => {
  loading.value = true;

  getDictionaryList({ page: page.value, pageSize: pageSize.value }).then(
    (res) => {
      dicData.value = res.data.result;
      if (res.data.result != null && res.data.result.length > 0) {
        dicType.value = {
          id: res.data.result[0].id,
          name: res.data.result[0].name,
        };

        searchDicItem.value.dictionaryId = res.data.result[0].id;
        itemTitle.value = res.data.result[0].name;
        getDicItemList();
      }

      loading.value = false;
    }
  );
};

const getDicItemList = () => {
  loading2.value = true;
  getDictionaryItemListByDid(searchDicItem.value).then((res) => {
    dicItemData.value = res.data.result;
    loading2.value = false;
  });
};
const openDialog = (type = 1, val = null) => {
  showModal.value = true;
  if (type == 1) {
    dialogTitle.value = "新增字典类型";
    dialogType.value = type;
  } else if (type == 2) {
    dialogType.value = type;
    dialogTitle.value = "修改字典类型";
    myDialogRef.value.init(val);
  }
};
const openDicItemDialog = (type = 1, val = null) => {
  showModalDicItem.value = true;
  if (type == 1) {
    dialogTitle.value = "新增字典项类型";
    dialogType.value = type;
  } else if (type == 2) {
    dialogType.value = type;
    dialogTitle.value = "修改字典项类型";
    myDialogDicItemRef.value.init(val);
  }
};
const closeModal = (type = 1) => {
  if (type == 1) showModal.value = false;
  else showModalDicItem.value = false;
};
const updatePageSize = (ps) => {
  pageSize.value = ps;
  getDicList();
};
const updatePage = (p) => {
  page.value = p;
  getDicList();
};
const goDetail = (row: any) => {
  return {
    style: "cursor: pointer;",
    onClick: () => {
      // window.$message.success(JSON.stringify(row));
      searchDicItem.value.dictionaryId = row.id;
      itemTitle.value = row.name;
      getDicItemList();
    },
  };
};
</script>

<style lang="scss" scoped>
.p-d-h {
  margin-bottom: 10px;
}
</style>
